<template>
  <div class="friend-select-box">
    <div class="left perfect-scrollbar">
      <el-checkbox-group v-model="checkList">
        <el-checkbox
          v-for="friend in friends"
          :key="friend.friendId"
          :label="friend.friendId"
          :disabled="isDisabled(friend.friendId)"
          class="flex-align-items-center friend-select-item"
        >
          <div class="flex-align-items-center">
            <img
              :src="friend.friendAvatar"
              class="select-avatar"
            />
            <span>
              {{friend.friendUserName}}
            </span>
          </div>
        </el-checkbox>
      </el-checkbox-group>
    </div>
    <div class="right perfect-scrollbar">
      <div
        v-for="friend in selectedFriends"
        :key="friend.friendId"
      >
        <div class="flex-align-items-center friend-select-item">
          <i
            class="delete-icon iconfont icon-close"
            @click="removeSelectedFriend(friend.friendId)"
          ></i>
          <img
            :src="friend.friendAvatar"
            class="select-avatar"
          />
          <span>
            {{friend.friendUserName}}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import _ from 'lodash'
export default {
  name: 'FriendSelect',
  model: {
    prop: 'selected',
    event: 'change1'
  },
  props: {
    selected: {
      required: true
    },
    disabledSelected: {
      default: () => []
    },
    friends: {
      default: () => []
    }
  },
  data () {
    return {
      checkList: []
    }
  },
  watch: {
    checkList: {
      handler (newVal) {
        this.$emit('change', newVal)
      },
      immediate: true
    }
  },
  computed: {
    selectedFriends () {
      return _.filter(this.friends, ({ friendId }) => {
        return this.checkList.includes(friendId)
      })
    }
  },
  methods: {
    reset () {
      this.checkList = this.selected
    },
    // 禁选列表
    isDisabled (friendId) {
      return this.disabledSelected.includes(friendId)
    },
    // 移除选中的参会人员
    removeSelectedFriend (friendId) {
      this.checkList.splice(this.checkList.indexOf(friendId), 1)
    },
    // 提交
    submit () {
      this.$emit('select', this.checkList)
    }
  }
}
</script>

<style lang="scss" scoped>
.select-avatar {
  width: 40px;
  height: 40px;
  margin: 0 10px;
}
.friend-select-box {
  display: flex;
  width: 800px;
  margin-bottom: 15px;
  .left {
    flex: 0 0 50%;
    overflow-x: hidden;
    height: 500px;
    border-right: 1px solid #ccc;
  }
  .right {
    flex: 0 0 50%;
    height: 500px;
    overflow-y: scroll;
  }
}
.friend-select-item {
  margin: 20px;
  font-size: 14px;
}
.delete-icon {
  font-size: 20px;
  cursor: pointer;
}
</style>
